/*
1 页面数据渲染
  1 定义一个函数
  2 发送请求获取数据  渲染页面 
    1 token 几乎都是携带在请求头中   写法几乎定死!！！
2 点击修改数据
  1 给tbody绑定 双击事件 
  2 判断是不是想要的元素 （成绩）
  3 显示出一个输入框
  4 给输入框绑定事件
    1 失去焦点事件
    2 按下回车事件
  5 事件触发 发送修改的请求 
  6 
*/

//获取元素
const tbody = document.querySelector('table');
//获取数据渲染数据
async function getScore() {
    const reslut = await axios({
        url: '/score/list',
        //请求头(对象中) 携带 token
        // headers: {
        //     // 一般就写这个名字，如果你的接口文档找不到说明，问后端确认
        //     Authorization: localStorage.getItem("token117"),
        // }
    });
    // console.log(reslut);
    //生成的html 
    let html = '';
    //遍历对象
    for (const key in reslut.data.data) {
        //解构
        const { name, score } = reslut.data.data[key]
        html += `
        <tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id=${key} data-batch=${1}>${score[0]}</td>
        <td class="score" data-stu_id=${key} data-batch=${2}>${score[1]}</td>
        <td class="score" data-stu_id=${key} data-batch=${3}>${score[2]}</td>
        <td class="score" data-stu_id=${key} data-batch=${4}>${score[3]}</td>
        <td class="score" data-stu_id=${key} data-batch=${5}>${score[4]}</td>
      </tr>
                `
    };
    //把html插入 tbody里面
    tbody.innerHTML = html;
};

//绑定双击事件
tbody.addEventListener('dblclick', e => {
    console.log('双击');//短时间内 快速按两下
    //判断是不是想要的元素 ( 成绩)
    const target = e.target; //相当于选中tr
    if (target.classList.contains('score')) {
        //显示出一个 输入框
        //创建一个输入框 
        const input = document.createElement('input');
        input.type = 'text';
        input.value = target.innerText;
        // 追加到对应的位置
        target.appendChild(input);
        //设置input标签获得焦点
        input.focus();

        //失去焦点
        input.addEventListener('blur', updateScore);

        //键盘按下回车键
        input.addEventListener('keyup', ev => {
            //判断按下是否是回车键
            if (ev.key === 'Enter') {
                //事件解绑 失去焦点事件
                input.removeEventListener('blur', updateScore);
                updateScore()
            }
        })
        //封装 函数
        async function updateScore() {
            //获取参数 发送请求 完成修改
            //获取参数 id 第几次成绩、分数 - 解构
            const { stu_id, batch } = target.dataset;
            const score = input.value;
            //发送请求
            const reslut = await axios({
                url: '/score/entry',
                method: 'post',
                data: {
                    stu_id,
                    batch,
                    score
                }
            });
            //判断是否成功
            if (reslut.data.code === 0) {
                toastr.success(reslut.data.message, "操作状态：");
                //成功之后刷新数据
                getScore();
            }

        }
    }
})
getScore();